<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>公务车信息填写</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body id="app">
		<div class="page"  >
			<!--代办人页面-->
			<div class="pageIndex" style="display: block;">
				<div class="pageTitle">
					<div class="backPage"><img src="image/left.png"/></div>
					<p>公务车信息填写</p>
					<span></span>
				</div>
				<div class="continue">
					<p>营销人员编码</p>
					<input type="text" placeholder="请输入营销人员编码" v-model="message.oper"   name="" id="" />
				</div>
				<div class="content">
					<div class="continue">
						<div>
							<h1>|</h1>
							<i>代办人信息</i>
							<span>（标*为必填）</span>
						</div>
					</div>
					<div class="updateImg">
						<label for="img_1"  class="squarePhoto">
							<div ><img src="image/xiangji.png"/></div>
							<p >点击上传正面照片</p>
							<input @change="change($event,'agent_idcard_picf')" class="Must" type="file" name="img_1" id="img_1" value="" />
						</label>
						<label for="img_2" class="squarePhoto">
							<div><img src="image/xiangji.png"/></div>
							<p>点击上传反面照片</p>
							<input @change="change($event,'agent_idcard_picb')" class="Must" type="file" name="img_2" id="img_2" value="" />
						</label>
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>代办人姓名<span>*</span></p>
						<input class="Must"  type="text"  v-model="message.agent_name"  placeholder="请输入代办人姓名"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>代办人手机<span>*</span></p>
						<input class="Must" type="number"  v-model="message.agent_mobile"  placeholder="请输入代办人手机"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>代办人电话<span>*</span></p>
						<input class="Must" type="number"   v-model="message.agent_tel"  placeholder="请输入代办人电话"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>代办人证件类型<span>*</span></p>
						<div class="selIdBtn">
							<input class="Must" type="text"     placeholder="选择代办人证件类型"  name="" id="" disabled="disabled" value="身份证" /><img src="image/right.png"/>
						</div>
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>代办人证件号码<span>*</span></p>
						<input class="Must" type="number"  v-model="message.agent_idno" placeholder="请输入代办人证件号码"  name="" id="" value="身份证" />
					</div>
				</div>
				<div></div>
				<button class="next">下一步</button>
			</div>
			
			<!--企业信息页面-->
			
			<div class="pageEnterprise" >
				<div class="pageTitle">
					<div class="back"><img src="image/left.png"/></div>
					<p>公务车信息填写</p>
					<span></span>
				</div>
				<div>
					<div class="continue">
						<div>
							<h1>|</h1>
							<i>企业信息</i>
							<span>（标*为必填）</span>
						</div>
					</div>
					<div class="updateImg">
						<label for="img_3"  class="squarePhoto">
							<div ><img src="image/xiangji.png"/></div>
							<p >点击上传正面照片</p>
							<input @change="change($event,'company_idcard_pic_url1')" class="Must" type="file" name="img_3" id="img_3" value="" />
						</label>
						<label for="img_4" class="squarePhoto">
							<div><img src="image/xiangji.png"/></div>
							<p>点击上传反面照片</p>
							<input @change="change($event,'auth_pic_url')" class="Must" type="file" name="img_4" id="img_4" value="" />
						</label>
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>统一社会信用代码<span>*</span></p>
						<input class="Must"  v-model="message.cmp_id"  type="text" placeholder="请输入统一社会性用代码"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>企业名称<span>*</span></p>
						<input class="Must"   v-model="message.cmp_name"  type="text" placeholder="请输入企业名称"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>经营场所<span>*</span></p>
						<input class="Must"  v-model="message.cmp_address"  type="text" placeholder="请输入经营场所"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>法人代表<span>*</span></p>
						<input class="Must" v-model="message.cmp_organ"  type="text" placeholder="请输入法人代表"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>成立日期<span>*</span></p>
						<div class="establishDate">
							<!--<input class="Must"  v-model="message.cmp_createdate" disabled="disabled" type="text" placeholder="请输入成立日期"  name="" id="" value="" />-->
							<input type="text" id="cmp_createdate" placeholder="请输入成立日期"  />
						</div>
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>注册资金<span>*</span></p>
						<input class="Must"   v-model="message.cmp_registered_capital"  type="text" placeholder="请输入注册资金"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>电子邮箱</p>
						<input type="text"   v-model="message.email"  placeholder="请输入电子邮箱"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>邮政编码</p>
						<input type="number"   v-model="message.zipcode"  placeholder="请输入邮政编码"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>单位联系电话<span>*</span></p>
						<input class="Must"   v-model="message.cmp_tel"  type="number" placeholder="请输入单位联系电话"  name="" id="" value="" />
					</div>
				</div>
				<div>
					<button class="prev">上一步</button>
					<button class="next">下一步</button>
				</div>
			</div>
			
			<!--车辆信息-->
			
			<div class="pageVehicle" >
				<div class="pageTitle">
					<div class="back"><img src="image/left.png"/></div>
					<p>公务车信息填写</p>
					<span></span>
				</div>
				
				<div>
					<div class="continue">
						<div>
							<h1>|</h1>
							<i>车辆信息</i>
							<span>（标*为必填）</span>
						</div>
					</div>
					<div class="updateImg">
						<label for="img_5"  class="squarePhoto">
							<div ><img src="image/xiangji.png"/></div>
							<p >点击上传正面照片</p>
							<input @change="change($event,'veh_license_picf')" class="Must" type="file" name="img_5" id="img_5" value="" />
						</label>
						<label for="img_6" class="squarePhoto">
							<div><img src="image/xiangji.png"/></div>
							<p>点击上传反面照片</p>
							<input @change="change($event,'veh_license_picb')" class="Must" type="file" name="img_6" id="img_6" value="" />
						</label>
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>车牌号<span>*</span></p>
						<input class="Must"  v-model="message.car_no"  type="number" placeholder="请输入车牌"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>车主姓名<span>*</span></p>
						<input class="Must" v-model="message.owner"  type="text" placeholder="请输入车主姓名"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>车辆类型<span>*</span></p>
						<div class="selVehicleBtn">
							<input class="Must" type="text"    placeholder="选择车辆类型"  name="" id="" disabled="disabled"  /><img src="image/right.png"/>
						</div>
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>轴数</p>
						<input type="number"   v-model="message.vehicle_axles"  placeholder="请输入轴数"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>轮数</p>
						<input type="number"   v-model="message.vehicle_wheels"  placeholder="请输入轮数"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>车型</p>
						<input type="text"   v-model="message.vehicle_txtclass"  placeholder="请输入车型"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>车牌颜色<span>*</span></p>
						<input type="text" disabled="disabled"      placeholder="请选择车牌颜色" name="" id="" value="" />
					</div>
					<div class="selColor">
						<div @click="message.color=0">
							<img src="image/chepai_1.jpg"/>
							<img  style="display: block;" src="image/xuanzhon.png"/>
						</div>
						<div @click="message.color=1">
							<img src="image/chepai_2.jpg"/>
							<img src="image/xuanzhon.png"/>
						</div>
						<div @click="message.color=2">
							<img src="image/chepai_3.jpg"/>
							<img src="image/xuanzhon.png"/>
						</div>
						<div @click="message.color=3">
							<img src="image/chepai_4.jpg"/>
							<img src="image/xuanzhon.png"/>
						</div>
						<div @click="message.color=4">
							<img src="image/chepai_5.jpg"/>
							<img src="image/xuanzhon.png"/>
						</div>
						<div @click="message.color=5">
							<img src="image/chepai_6.jpg"/>
							<img src="image/xuanzhon.png"/>
						</div>
						<i></i>
						<i></i>
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>使用性质<span>*</span></p>
						<input class="Must"  v-model="message.func_type"  type="text" placeholder="请输入使用性质"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>厂牌型号</p>
						<input type="text"   v-model="message.factory_code"  placeholder="请输入厂牌型号"  name="" id="" value="" />
					</div>
				</div>
				<div>
					<button class="prev">上一步</button>
					<button class="next">下一步</button>
				</div>
			</div>
			
			<!--车辆补充信息-->
			
			<div class="pageSupplement" >
				<div class="pageTitle">
					<div class="back"><img src="image/left.png"/></div>
					<p>公务车信息填写</p>
					<span></span>
				</div>
				<div>
					<div class="continue">
						<div>
							<h1>|</h1>
							<i>车辆补充信息</i>
							<span>（标*为必填）</span>
						</div>
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>座位数<span>*</span></p>
						<input class="Must"   v-model="message.approved_count"  type="text" placeholder="请输入座位数"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>发动机号<span>*</span></p>
						<input class="Must"   v-model="message.engine_code"  type="text" placeholder="请输入发动机号"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>车辆识别号<span>*</span></p>
						<input class="Must"    v-model="message.vehicle_code" type="text" placeholder="请输入车辆识别号"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>车辆行驶证地址<span>*</span></p>
						<input class="Must" v-model="message.vehicle_info_address" type="text" placeholder="请输入车辆行驶证地址"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>注册日期<span>*</span></p>
						<div class="regDate">
							<!--<input disabled="disabled"  v-model="message.register_date" class="Must"   type="text" placeholder="请输入注册日期"  name="" id="" value="" />-->
							<input type="text" id="register_date" placeholder="请输入注册日期"  />
						</div>
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>发证日期<span>*</span></p>
						<div class="grantDate">
							<!--<input disabled="disabled" class="Must"  v-model="message.issue_date"   type="text" placeholder="请输入发证日期"  name="" id="" value="" />-->
							<input type="text" id="issue_date" placeholder="请输入注册日期"  />
						</div>
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>车辆长</p>
						<input type="text"  v-model="message.vehicle_length"  placeholder="请输入车辆长"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>车辆宽</p>
						<input type="text"  v-model="message.vehicle_width"  placeholder="请输入车辆宽"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>车辆高</p>
						<input type="text"  v-model="message.vehicle_height"  placeholder="请输入车辆高"  name="" id="" value="" />
					</div>
				</div>
				<div>
					<button class="prev">上一步</button>
					<button class="next">下一步</button>
				</div>
			</div>
			
			<!--邮寄信息-->
			
			<div class="pageMail" >
				<div class="pageTitle">
					<div class="back"><img src="image/left.png"/></div>
					<p>公务车信息填写</p>
					<span></span>
				</div>
				<div v-show="message.whether_mail==1">
					<div class="continue">
						<div>
							<h1>|</h1>
							<i>邮寄信息</i>
							<span>（标*为必填）</span>
						</div>
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>是否邮寄<span>*</span></p>
						<div @click="selMail=true">
							<!--<label><input type="radio"   v-model="message.whether_mail"  checked="checked"  name="sel" id="" value="1" />邮寄</label>						
							<label><input type="radio"   v-model="message.whether_mail"   name="sel" id="" value="2" />不邮寄</label>						-->
							<input type="text" disabled="disabled" placeholder="请选择是否邮寄" name="" id="" value="" /><img src="image/right.png"/>
						</div>
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>收货地址</p>
						<div>
							<input type="text"   value="北京 东城区" id='city-picker'  /><img src="image/right.png"/>
						</div>
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>详细地址</p>
						<input type="text"  v-model="message.addr_address"   placeholder="请输入详细地址"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>收货人</p>
						<input type="text"  v-model="message.addr_consignee_name"   placeholder="请输入收货人"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>收货电话</p>
						<input type="number"  v-model="message.addr_tel"  placeholder="请输入收货电话"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>收货手机号</p>
						<input type="number"  v-model="message.addr_con_mobilephone"  placeholder="请输入收货电话"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>收货电子邮箱</p>
						<input type="number"  v-model="message.addr_email"  placeholder="请输入收货电子邮箱"  name="" id="" value="" />
					</div>
				</div>
				
				
				<div v-show="message.whether_mail==2">
					<div class="continue">
						<div>
							<h1>|</h1>
							<i>邮寄信息</i>
							<span>（标*为必填）</span>
						</div>
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>是否邮寄<span>*</span></p>
						<div @click="selMail=true">
							<!--<label><input type="radio"   v-model="message.whether_mail"  checked="checked"  name="sel" id="" value="1" />邮寄</label>						
							<label><input type="radio"   v-model="message.whether_mail"   name="sel" id="" value="2" />不邮寄</label>						-->
							<input type="text" disabled="disabled" placeholder="请选择是否邮寄" name="" id="" value="" /><img src="image/right.png"/>
						</div>
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>粤通卡号<span>*</span></p>
						<div >
							<input type="text" :class="message.whether_mail==2?'Must':''"   placeholder="请输入粤通卡号" name="" id="" value="" />
						</div>
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>标签号<span>*</span></p>
						<div>
							<input type="text" :class="message.whether_mail==2?'Must':''"  placeholder="请输入标签号" name="" id="" value="" />
						</div>
					</div>
				</div>
				
				<div>
					<button class="prev">上一步</button>
					<button class="next">下一步</button>
				</div>
			</div>
			
			<div class="selMail" v-if="selMail" @click="selMail=false">
				<div>
					<ul>
						<li @click="message.whether_mail=1">邮寄</li>
						<li @click="message.whether_mail=2">现场领取</li>
					</ul>
				</div>
				<div class="selVehiclecancel">取消</div>
			</div>
			<!--发票信息-->
			
			<div class="pageInvoice">
				<div class="pageTitle">
					<div class="back"><img src="image/left.png"/></div>
					<p>公务车信息填写</p>
					<span></span>
				</div>
				<div>
					<div class="continue">
						<div>
							<h1>|</h1>
							<i>发票信息</i>
							<span>（标*为必填）</span>
						</div>
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>发票抬头</p>
						<input type="text" v-model="message.invoice_title_id"  placeholder="请输入发票抬头"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>发票用户类型</p>
						<input type="text"  v-model="message.invo_user_type"  placeholder="请输入发票用户类型"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>姓名</p>
						<input type="text"  v-model="message.invo_name"  placeholder="请输入姓名"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>纳税人识别号</p>
						<input type="text"  v-model="message.invo_tax_num"  placeholder="请输入纳税人识别号"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>地址</p>
						<input type="text"  v-model="message.invo_address"  placeholder="请输入地址"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>联系电话</p>
						<input type="number"  v-model="message.invo_tel"  placeholder="请输入联系电话"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>银行名称</p>
						<input type="text"  v-model="message.invo_bank"  placeholder="请输入银行名称"  name="" id="" value="" />
					</div>
					<div class="hr"></div>
					<div class="continue">
						<p>银行帐号</p>
						<input type="number"  v-model="message.invo_bank_account"  placeholder="请输入银行帐号"  name="" id="" value="" />
					</div>
				</div>
				<div>
					<button class="prev">上一步</button>
					<button class="submit" @click="submit()">提交</button>
				</div>
			</div>
			
			<!--提交成功-->
		
			<div class="success" style="display: none;">
				<div>
					<h6>提交成功</h6>
					<p>已提交审核，请等待审核结果</p>
					<button class="determine">确定</button>
				</div>
			</div>
			<!--选择证件类型-->
			<div class="selID" style="display: none;">
				<div>
					<ul>
						<li data-type = "1">身份证</li>
					</ul>
				</div>
				<div class="selIDcancel">取消</div>
			</div>
			<!--选择车辆类型-->
			<div class="selVehicle" style="display: none;">
				<div>
					<ul>
						<li data-type = "1">客车</li>
						<li data-type = "2">货车</li>
						<li data-type = "3">专项作业车</li>
					</ul>
				</div>
				<div class="selVehiclecancel">取消</div>
			</div>
			
			<!--成立日期-->
			<div class="inputEstablishDate" style="display: none;">
				<div>
					<input type="number" name="" id="" value="" />年
					<input type="number" name="" id="" value="" />月
					<input type="number" name="" id="" value="" />日
				</div>
				<div>
					<div class="EstablishDatecancel">确认</div>
					<div class="EstablishDatecancel">取消</div>
				</div>
			</div>
			
			<!--注册日期-->
			
			<div class="inputRegDate" style="display: none;">
				<div>
					<input type="number" name="" id="" value="" />年
					<input type="number" name="" id="" value="" />月
					<input type="number" name="" id="" value="" />日
				</div>
				<div>
					<div class="RegDatecancel">确认</div>
					<div class="RegDatecancel">取消</div>
				</div>
			</div>
			
			<!--发证日期-->
			
			<div class="inputGrantDate" style="display: none;">
				<div>
					<input type="number" name="" id="" value="" />年
					<input type="number" name="" id="" value="" />月
					<input type="number" name="" id="" value="" />日
				</div>
				<div>
					<div class="GrantDatecancel">确认</div>
					<div class="GrantDatecancel">取消</div>
				</div>
			</div>
		</div>
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
		<script type="text/javascript" src="//g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script>
		<script src="js/datePicker.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("#city-picker").cityPicker({
			    toolbarTemplate: '<header class="bar bar-nav">\
			    <button class="button button-link pull-right close-picker">确定</button>\
			    <h1 class="title">选择收货地址</h1>\
			    </header>',
			    onClose:(e)=>{
			    	vm.message.addr_province = e.cols[0].displayValue;
			    	vm.message.addr_city = e.cols[1].displayValue;
			    	vm.message.addr_district = e.cols[2].displayValue;
			    }
		  	});
		  	var calendar = new datePicker();
			calendar.init({
			    'trigger': '#cmp_createdate', /*按钮选择器，用于触发弹出插件*/
			    'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
			    'minDate':'1900-1-1',/*最小日期*/
			    'maxDate':'2100-12-31',/*最大日期*/
			    'onSubmit':function(){/*确认时触发事件*/
			        var theSelectData=calendar.value;
			        vm.message.cmp_createdate = theSelectData.split("-").join("");
			    },
			    'onClose':function(){/*取消时触发事件*/
			    }
			});
			
		  	var register_date = new datePicker();
			register_date.init({
			    'trigger': '#register_date', /*按钮选择器，用于触发弹出插件*/
			    'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
			    'minDate':'1900-1-1',/*最小日期*/
			    'maxDate':'2100-12-31',/*最大日期*/
			    'onSubmit':function(){/*确认时触发事件*/
			        var theSelectData=register_date.value;
			        vm.message.register_date = theSelectData.split("-").join("");
			    },
			    'onClose':function(){/*取消时触发事件*/
			    }
			});
			
			var issue_date = new datePicker();
			issue_date.init({
			    'trigger': '#issue_date', /*按钮选择器，用于触发弹出插件*/
			    'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
			    'minDate':'1900-1-1',/*最小日期*/
			    'maxDate':'2100-12-31',/*最大日期*/
			    'onSubmit':function(){/*确认时触发事件*/
			        var theSelectData=issue_date.value;
			        vm.message.issue_date = theSelectData.split("-").join("");
			    },
			    'onClose':function(){/*取消时触发事件*/
			    }
			});
		</script>
	</body>
</html>
